<template>
  <el-dialog
    v-model="changePasswordDialog.visible"
    title="修改密码"
    width="600px"
    class="system"
    close-icon="CloseBold"
    @close="closeDialog"
  >
    <el-form ref="corpFormRef" :model="corpForm" :rules="rules" label-width="120px">
      <el-row justify="start">
        <el-col :span="itemSpan">
          <el-form-item label="企业名称" prop="name">
            <el-input v-model="corpForm.name" :disabled="true" placeholder="请输入企业名称" class="input300" />
          </el-form-item>
        </el-col>
        <el-col :span="itemSpan">
          <el-form-item label="企业信用代码" prop="code">
            <el-input v-model="corpForm.code" :disabled="true" placeholder="请输入企业信用代码" class="input300" />
          </el-form-item>
        </el-col>
        <el-col :span="itemSpan">
          <el-form-item label="登录密码" prop="password">
            <PasswordInput @input-change="handlePasswordChange" />
            <!-- <el-input v-model="corpForm.password" type="password" placeholder="请输入登录密码" class="input300" /> -->
          </el-form-item>
        </el-col>
        <el-col :span="itemSpan">
          <el-form-item label="确认密码" prop="confirmPassword">
            <el-input
              v-model="corpForm.confirmPassword"
              :show-password="true"
              type="password"
              placeholder="请输入确认密码"
              class="input300"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" :loading="loading" @click="handleSubmit">确 定</el-button>
        <el-button @click="closeDialog()">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import PasswordInput from "@/components/PasswordInput/index.vue";
import { ref, reactive, nextTick, computed } from "vue";
import { CorpForm } from "@/api/account/corp/types";
import { getCorp, updateCorpPassWord } from "@/api/account/corp/index";
import { getDicts } from "@/store/modules/dict";
import type { FormInstance, FormRules } from "element-plus";
import { getProjectCorps } from "@/api/group";
const userType = localStorage.getItem("usertypeName");
const itemSpan = ref(24);
const corpForm = reactive<CorpForm>({});
// const corpForm = ref(reactive<CorpForm>)
const corpFormRef = ref(ElForm); // 表单/清空重置使用
const rules = reactive<FormRules<CorpForm>>({
  password: [{ required: true, message: "登录密码不能为空", trigger: "blur" }],
  confirmPassword: [{ required: true, trigger: "blur", validator: passwordBlur }],
});
const loading = ref(false);
const allowPassword = ref(false);

function passwordBlur(rule: any, value: any, callback: any) {
  if (!value || value === undefined || value === "") {
    callback(new Error("确认密码不能为空"));
    return;
  } else {
    if (value != corpForm.password) {
      callback(new Error("两次密码不一致"));
      return;
    } else {
      callback();
    }
  }
}
const handlePasswordChange = (value: any, allow: boolean) => {
  corpForm.password = value;
  allowPassword.value = allow;
};
const props = defineProps({
  changePasswordDialog: {
    type: Object,
    default: () => ({
      visible: false,
    }),
  },
});
let { changePasswordDialog } = toRefs(props);

const emit = defineEmits(["sendClose"]);

/**
 * 关闭弹窗
 */
function closeDialog() {
  emit("sendClose");
  corpForm.password = undefined;
  corpForm.confirmPassword = undefined;
}

//提交数据
function handleSubmit() {
  if (!allowPassword.value) return;
  corpFormRef.value.validate((valid: any) => {
    if (valid) {
      loading.value = true;
      updateCorpPassWord(corpForm.password)
        .then((data) => {
          if (data.success) {
            ElMessage({
              type: "success",
              message: data.msg,
            });
            closeDialog();
          } else {
            ElMessage({
              type: "error",
              message: data.msg,
            });
          }
        })
        .finally(() => (loading.value = false));
    }
  });
}

function initData() {
  getCorp().then((res) => {
    if (res.success === true) {
      Object.assign(corpForm, res.data);
    }
  });
}

onMounted(() => {
  initData();
});
</script>

<style lang="scss" scoped></style>
